<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步同步</title>
    <style>.active{color:red}</style>
<body>
    <h1>我是H1</h1>
    
    <script>
//  手写通过promise 加载一张图片
function loadImg(src){
    // 创建并返回一个promise承诺
    return new Promise((resolve,reject)=>{
        let img = document.createElement("img");//创建一个图片标签
        img.onload=()=>{           
                resolve(img);       
        }
        // 加载成功返回承诺
        img.onerror=(err)=>{
            reject(err);
        }
        // 加载失败解决承诺
        img.src = src;
        // 设置src
    })
}
loadImg("./image/logo.png")
.then(img=>{
    console.log(img.width);
    return img;
})
.then(img=>{
    console.log(img.height);
    document.body.append(img);
    return loadImg("./image/tm.jpg");
})
.then(img2=>{
    console.log(img2.width,img2.height);
    document.body.append(img2);
})
// 成功
.catch(err=>{
    console.log(err);
})
// 失败


// 异步应用场景图片
/* console.log("开始");
let img  = document.createElement("img");
// 创建一个图片标签
img.onload = function(){
    console.log("加载完毕");
    document.body.append(img);
}
img.src = "./image/logo.png";
console.log("结束") */

// 异步应用场景定时
// console.log(100);
// setTimeout(function(){
//     console.log(200);
// },1000)
// console.log(300);
// setTimeout(function(){
//     console.log(400);
// },0)
// console.log(500);

// 100 300  500 400 200

        // 异步
   /*   console.log(100);
     setTimeout(function(){
         console.log(200);
     },1000)
    console.log(300);
    //  输出的顺序是？ */
    
    // 同步
//   console.log(100);
//   alert(200);
//  console.log(300);



  



    </script>

</body>
</html>